<template>
    <view class="popup">

        <view class="box" style="min-height: 300rpx;">
            <view class="title" v-if="title">{{title}}</view>

            <block >
                <view v-if="money>0" style="text-align:center;line-height: 40px;height:40px;vertical-align: bottom;">

                    <span style="font-size: 16px;vertical-align: bottom;">￥</span>
                    <span style="font-size:30px;vertical-align: bottom;font-weight: 600;">{{money}}</span>
                </view>
                <view class="payMent-input" :style="money>0?'':'margin-top: 30px;'">
                    <input maxlength="6" class="payMent-input-passInput" type="digit" @input="passInputTwo"
                        v-model="pwdPass" :focus="focus" />
                    <view class="payMent-input-item ">
                        <view>
                            <block v-if="passInputLenght != 0 && passInputLenght <=6">·</block>
                        </view>
                        <view>
                            <block v-if="passInputLenght >= 2 && passInputLenght <=6">·</block>
                        </view>
                        <view>
                            <block v-if="passInputLenght >= 3 && passInputLenght <=6">·</block>
                        </view>
                        <view>
                            <block v-if="passInputLenght >= 4 && passInputLenght <=6">·</block>
                        </view>
                        <view>
                            <block v-if="passInputLenght >= 5 && passInputLenght <=6">·</block>
                        </view>
                        <view style="border-right: 0px;">
                            <block v-if="passInputLenght == 6">·</block>
                        </view>
                    </view>
                </view>
            </block>
            <image src="../static/img/closebtn.png" class="close-btn" @tap="click_close()"></image>
        </view>
    </view>
</template>

<script>
    import uniIcons from './uni-icons/uni-icons.vue'
    import http from "../library/http.js"
    export default {
        components: {

            uniIcons,

        },
        props: {
            getmoney: {

            },
            fix: {
                default: false
            },
            title: {
                default: '支付'
            },
            type: {
                default: 'reward',

            },
            id: {
                default: 0
            },
            payinfo: {
                default: {}
            },
            tyxina:{
                type:Boolean,
                default:false
            }
                

        },
        data() {
            return {
                step: 0,
                money: 0,
                money_arr: [5, 10, 50, 100],
                focus: false,
                focus0: false,
                user: uni.getStorageSync('userInfo'),
                passInputLenght: '',
                pwdPassCw: false,

                pwdPass: '',
                pwd: ''


            };
        },
        methods: {
            passInputTwo: function(e) {
                this.passInputLenght = e.detail.value.length;
                this.pwd = e.detail.value;

                // #ifdef APP-PLUS
                if (e.detail.value.length == 6) {
                    plus.key.hideSoftKeybord();
                }
                // #endif

                if (e.detail.value.length == 6) {
                    // 提现
                    if(this.tyxina){
                       this.$emit('tixian',this.pwdPass)
                       return 
                    }
                    // 支付
                    this.paysubmit();

                }
            },
            paysubmit() {
                var data = {
                    type: this.type,
                    payinfo: JSON.stringify(this.payinfo),
                    money: this.money,
                    pwd: this.pwd,
                    id: this.id,
                    userid: this.user.id
                };


                http.setWait(true).post('pay.php?act=paymoney', data).then(res => {

                    if (res.code == 200) {

                        uni.showToast({
                            title: res.message,

                        })
                        this.getuserinfo();

                        if (this.type == 'redpacket' || this.type == 'vip') {
                            this.$emit('payresult', res.data)
                        } else this.click_close();
                    } else if (res.code == 1) {
                        uni.showModal({
                            title: '提示',
                            content: "您的余额不足，请先去充值！",
                            showCancel: true,
                            cancelText: '取消',
                            confirmText: '知道了',
                            success: res => {

                                if (res.confirm) {

                                    // uni.redirectTo({
                                    //     url: "/pages/mine/recharge"
                                    // })
                                }
                            }
                        });
                    }

                })
            },
            click_close() {
                this.$emit('close');
            },
            click_next() {
                if (isNaN(this.money)) {
                    uni.showToast({
                        title: '金额必须为数字',
                        icon: 'none'
                    })
                    this.focus = true;
                    return false;
                }
                if (this.money == '') {
                    uni.showToast({
                        title: '请输入金额',
                        icon: 'none'
                    })
                    this.focus = true;
                    return false;
                }
                if (this.money < 1) {
                    uni.showToast({
                        title: '最低支付金额为1元',
                        icon: 'none'
                    })
                    this.focus = true;
                    return false;
                }

                if (parseFloat(this.money) > parseFloat(this.user.money)) {

                    uni.showModal({
                        title: '提示',
                        content: "您的余额不足，请先去充值！",
                        showCancel: true,
                        cancelText: '取消',
                        confirmText: '去充值',
                        success: res => {

                            if (res.confirm) {

                                uni.redirectTo({
                                    url: "/pages/mine/recharge"
                                })
                            }
                        }
                    });
                }

                this.step = 1;
                this.focus = true;


            },
            getuserinfo() {
                var postdata = {
                    id: uni.getStorageSync('access_token')
                };
                http.setWait(false).post('user.php?act=userinfo', postdata).then(res => {
                    this.user = res.data;
                    uni.setStorageSync('userInfo', this.user)
                })

            },
            init() {
                if (this.step == 1) {

                    this.focus = true;
                } else {
                    this.focus0 = true;
                }
            }
        },
        mounted() {
            if (this.getmoney > 0) this.money = this.getmoney;
            if (this.fix === true && this.getmoney > 0) {
                this.step = 1;

            } else {

            }
            this.getuserinfo();
            var that = this;
            setTimeout(function() {
                that.init();
            }, 200)
        },

    }
</script>

<style lang="scss" scoped>
    .popup {
        position: fixed;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.6);
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }

    .popup .box {
        position: fixed;
        left: 5%;
        width: 90%;
        top: 25vh;
        height: auto;
        background-color: #fff;
        border-radius: 10px;
    }

    .popup .box .close-btn {
        position: absolute;
        right: -9px;
        top: -9px;
        height: 30px;
        width: 30px;
    }

    .popup .title {
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #000;
        font-size: 16px;
        font-weight: 600;
        width: 100%;

        display: block;
        border-bottom: 1px solid #DDDDDD;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-bottom: 5px;
    }

    .popup .textarea {
        display: block;
        height: 160px;
        padding: 5px 10px;
        margin: 10px auto;
        width: calc(100% - 42px);
        border-radius: 5px;
        border: 1px solid #ddd;
        overflow-y: scroll;
    }

    .layer_nav {
        width: 100%;
        display: block;
        height: 50px;
        line-height: 50px;
        padding: 0px !important;
        margin: 0px !important;
        background-color: #eee;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
    }

    .layer_nav li {
        display: inline-block;
        float: left;
        color: #666;
        background-color: #eee;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        width: 150px;
    }

    .layer_nav li i {
        margin-right: 0px;
    }

    .layer_nav li.active {
        background-color: #3f6df5;
        color: #fff;
    }

    .layer_nav li:first-child {
        border-top-left-radius: 8px;
    }

    .layer_btns {


        display: inline-block;
        line-height: 30px;
        padding: 0px 15px;
        border-radius: 5px;
        border: 0px;
        text-align: center;
        cursor: pointer;
        height: 30px;
        color: #fff;
        margin-left: 15px;
        font-size: 14px;
    }

    .layer_btns.ok {
        background: -webkit-linear-gradient(left top, #3388ff, #2319dc);
        background: -o-linear-gradient(bottom right, #3388ff, #2319dc);
        background: -moz-linear-gradient(bottom right, #3388ff, #2319dc);
        background: linear-gradient(to bottom right, #3388ff, #2319dc);
        height: 30px !important;
    }

    .layer_btns.cancel {
        border: 1px solid #666;
        color: #666;
        background-color: #fff;
        height: 30px;
        line-height: 30px !important;

    }

    .popup .box {
        left: 10%;
        width: 80%;
    }

    .profile {
        height: 50px;
        line-height: 50px;
        clear: both;
        width: 100%;
        margin: 0 auto;
    }

    .profile li {
        display: inline-block;
        text-align: left;
    }

    .profile li:first-child {
        text-align: right;
        padding-right: 5px;
        width: 80px;
        ;
    }

    .profile li:last-child {
        width: calc(100% - 90px);
    }

    .profile .input1 {
        width: 90px;
        height: 35px;
        line-height: 35px;

        padding: 0px 10px;
        font-size: 14px;
        background-color: transparent;
        color: #222;
        border: 1px solid #ccc;
        border-radius: 5px;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }

    .profile .input1::placeholder {
        color: #666;
    }

    .profile .input1:focus {
        border-color: #000;
        box-shadow: 0 0 15px #000
    }

    .profile .money {
        height: 25px;
        line-height: 25px;
        margin: 5px 5px;
        text-align: center;
        border-radius: 5px;
        background-color: #fff;
        border: 1px solid #666;
        color: #555;
        width: 50px;
        display: inline-block;
        cursor: pointer;
    }

    .profile .money.active {
        background-color: #2319dc;
        border-color: #2319dc;
        color: #fff;
    }

    .payMent-input {
        width: calc(100% - 30px);
        margin: 10px 15px;
        height: 80upx;

        border-right: 2upx solid #333;

        border: 2upx solid #333;
        position: relative;
        /* border-right: none; */

    }

    .payMent-input-passInput {
        position: absolute !important;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0;

    }

    .payMent-input-item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        height: 80upx;
        line-height: 80upx;
        padding: 0px 0px !important;
        overflow: hidden;

    }

    .payMent-input-item>view {

        border-right: 2upx solid #000000;
        text-align: center;
        height: 80upx;
        line-height: 80upx !important;
        overflow: hidden;

        font-size: 34px;
        font-weight: 700;
        width: calc(16.6% - 1px);
    }
</style>